<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>太工Page</title>
		<!-- 引入reset.css用来清除浏览器的默认样式 -->
		<link rel="stylesheet" type="text/css" href="css/reset-min.css"/>
		<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(){
				var imgList = document.getElementById("imgList");
				var imgArr = document.getElementsByClassName("img_a");
				imgList.style.width = 940*imgArr.length+"px";
				var navDiv = document.getElementById("navDiv");
				var outer = document.getElementById("outer");
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
				
				var index = 0;
				var allA = document.getElementsByClassName("aa");
				//设置默认选中的效果
				allA[index].style.backgroundColor = "black";
				
				for(var i=0; i<allA.length ; i++){
					allA[i].num = i;
					//为超链接绑定单击响应函数
					allA[i].onclick = function(){
						clearInterval(timer);
						index = this.num;
						setA();
						
						//使用move函数来切换图片
						move(imgList , "left" , -940*index , 200 , function(){
							//动画执行完毕，开启自动切换
							autoChange();
						});
					};
				}
				//开启自动切换图片
				autoChange();
				//创建一个方法用来设置选中的a
				function setA(){
					if(index >= imgArr.length - 1){
						index = 0;
						imgList.style.left = 0;
					}
					for(var i=0 ; i<allA.length ; i++){
						allA[i].style.backgroundColor = "";
					}
					allA[index].style.backgroundColor = "white";
				};
				var timer;
				//创建一个函数，用来开启自动切换图片
				function autoChange(){
					timer = setInterval(function(){
						index++;
						index %= imgArr.length;
						move(imgList , "left" , -940*index , 20 , function(){
							setA();
						});
						
					},2000);
					
				}
			};
		  
			//尝试创建一个可以执行简单动画的函数
			function move(obj, attr, target, speed, callback) {
				clearInterval(obj.timer);
				var current = parseInt(getStyle(obj, attr));
				if(current > target) {
					speed = -speed;
				}

				obj.timer = setInterval(function() {
					var oldValue = parseInt(getStyle(obj, attr));
					var newValue = oldValue + speed;
					if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
						newValue = target;
					}
					obj.style[attr] = newValue + "px";

					if(newValue == target) {
						clearInterval(obj.timer);
						callback && callback();
					}
				}, 30);
			}
			//定义一个函数，用来获取指定元素的当前的样式
			function getStyle(obj, name) {
				return getComputedStyle(obj, null)[name];
		}
	</script>
	</head>
	<body>

		<!--header开始-->
		<div class="header w">
			
			<!-- 创建一个导航条 -->
			<ul class="nav">
				<li>
					<a href="#">网站首页</a>
				</li>
				<li>
					<a href="http://www.tit.edu.cn/xygk/xyjj.htm">学院概况</a>
				</li>
				<li>
					<a href="http://www.tit.edu.cn/zzjg.htm">组织机构</a>
				</li>
				<li>
					<a href="http://www.tit.edu.cn/yxsz.htm">院系设置</a>
				</li>
				<li>
					<a href="http://zsxx.tit.edu.cn/">招生就业</a>
				</li>
				<li>
					<a href="http://jwc.tit.edu.cn/">人才培养</a>
				</li>
				<li>
					<a href="http://jwc.tit.edu.cn/">教学科研</a>
				</li>
				<li>
					<a href="http://gjc.tit.edu.cn/">交流合作</a>
				</li>
			</ul>
			<!-- 在div中设置logo -->
			<div class="logo">
				<a href="#" title="太原工业学院">
					<img src="img/logo.png" alt="网站的logo" />
				</a>
			</div>
		</div>
		<!--header结束-->
		
		<!--banner开始-->
		<div class="banner w">
			
		  <!-- 创建一个外部的div，来作为大的容器 -->
			<div id="outer">
				<ul id="imgList">
					<li><img class='img_a' src="img/banner/banner01.png" alt=""></li>
					<li><img class='img_a' src="img/banner/banner02.png" alt=""></li>
					<li><img class='img_a' src="img/banner/banner03.png" alt=""></li>
					<li><img class='img_a' src="img/banner/banner04.png" alt=""></li>
					<li><img class='img_a' src="img/banner/banner05.png" alt=""></li>
					<li><img class='img_a' src="img/banner/banner06.png" alt=""></li>
					<li><img class='img_a' src="img/banner/banner01.png" alt=""></li>
				</ul>
			
				<!--创建导航按钮-->
				<div id="navDiv">
				  <a class='aa' href="javascript:;"></a>
				  <a class='aa' href="javascript:;"></a>
				  <a class='aa' href="javascript:;"></a>
				  <a class='aa' href="javascript:;"></a>
				  <a class='aa' href="javascript:;"></a>
				  <a class='aa' href="javascript:;"></a>
				</div>
			</div>
		</div>
		<!--banner结束-->
		
		<!--content开始-->
		<div class="content w clearfix">
			<h1>知行合一 行胜于言</h1>
			<!-- 放置内容的三个div -->
			<div class="pl">
				<h2>学院通知</h2>
				<!-- 创建图片的div -->
				<div class="imgDiv">
					<ul class="nav">
						<li>
							<a href="http://www.tit.edu.cn/info/1024/11055.htm">关于进一步拓宽师生意见建议反馈渠道的通知</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/11050.htm">太原工业学院关于2020年暑假放假安排的通知</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/11042.htm">太原工业学院2020年暑假处级干部值班安排表</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/10950.htm">关于做好6月份学院处级干部值班工作的通知</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/10935.htm">关于收看CCTV发现之旅频道《起航双创 点亮未来》专题节目的通知</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/10910.htm">关于加强2020年全国“两会”期间值班与应急工作的通知</a>
						</li>
						
					</ul>
				</div>
				
				<a class="lm" href="http://www.tit.edu.cn/xytz.htm">更多</a>
			</div>
			
			
			<div class="cs">
				<h2>菁菁校园</h2>
				<!-- 创建图片的div -->
				<div class="imgDiv">
					<ul class="nav">
						<li>
							<a href="http://www.tit.edu.cn/info/1026/11057.htm">迎“七一”后勤党总支组织开展助力美丽校园主题党日活动</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/11056.htm">设计艺术系党总支开展“践行领袖嘱托，率先趟出新路”庆七一主题党日活动</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/11058.htm">教辅单位党总支组织开展主题党日活动</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/10020.htm">化学与化工系教工党支部举行种树活动</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/10015.htm">我院刘春泉教授作品荣获第七届“相约北京”全国文学艺术大赛一等奖</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/10013.htm">太原工业学院同寝室六人同时考研成功</a>
						</li>
						
					</ul>
				</div>
				
				<a class="lm" href="http://www.tit.edu.cn/jjxy.htm">更多</a>
			</div>
			
			
			<div class="uc">
				<h2>学院公告</h2>
				<!-- 创建图片的div -->
				<div class="imgDiv">
					<ul class="nav">
						<li>
							<a href="http://www.tit.edu.cn/info/1024/11066.htm">太原工业学院开泰园建设工程项目谈判采购公告</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/11062.htm">2020年电梯维保服务采购项目谈判采购公告</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/11063.htm">大学物理虚拟仿真实验软件开发服务项目谈判采购公告</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/10065.htm">太原工业学院网络出口宽带竞争性谈判公告</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/10046.htm">太原工业学院新能源汽车测试平台项目中标公告</a>
						</li>
						<li>
							<a href="http://www.tit.edu.cn/info/1024/10040.htm">太原工业学院资产处招标代理机构入围的询比采购成交公告</a>
						</li>
						
					</ul>
				</div>
				
				<a class="lm" href="http://www.tit.edu.cn/xygg.htm">更多</a>
				
			</div>
		</div>
		<!--content结束-->
		
		<!--contact开始-->
		<div class="contact w clearfix">
			<!-- 创建三栏div -->
			<div class="sc">
				<h2>地理信息</h2>
				<!-- 设置段落 -->
				<p class="p1">地址:  山西省太原市尖草坪区新兰路31号</p>
				
				<h2>邮编 版权所有</h2>
				<p class="p1">邮编：030008</p>
				<p class="p1">版权所有：太原工业学院</p>
				
				<h2>ICP备案号 晋公网安备号</h2>
				<p class="p1">ICP备案号：晋ICP备14003279号</p>
				<p class="p1">晋公网安备号：140110430070001</p>
				
			</div>
			
			<!-- 联系栏中间 -->
			<div class="co">
				<!-- 创建一个标题 -->
				<h2>意见</h2>
				<!-- 创建一个表单 -->
				<form action="#">
					<!-- 
						在文本框和文本域中可以通过placeholder来指定提示文字（水印）
						这个属性在IE8及以下的浏览器中不支持，如果要兼容IE8需要使用JS
					-->
					<input class="txt" type="text" placeholder="学号"  />
					<input class="txt" type="text" placeholder="密码" />
					<textarea class="tarea" placeholder="message"></textarea>
					<button class="btn">发送</button>
				</form>
			</div>
			
			<div class="nu">
				<h2>专题网站</h2>
				<a href="http://ggcxffywdtl.tit.edu.cn/">
				    <img border="0" src="img/pic/1.png" />
				</a>
				<a href="http://cpc.people.com.cn/19th/">
				    <img border="0" src="img/pic/2.png" />
				</a>
				<a href="http://www.ceat.edu.cn/">
				    <img border="0" src="img/pic/3.png" />
				</a>
				<a href="about:blank">
				    <img border="0" src="img/pic/4.png" />
				</a>
			</div>
			
		</div>
		<!--contact结束-->
		
		<!--footer开始-->
		<div class="footer">
			<div class="w">
				<p class="copy">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p>
				<p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p>
				<p><a href="#">Home</a>  | <a href="#">About</a> | <a href="#">Products</a> | <a href="#">Services</a> | <a href="#">Contact</a></p>
				<p><a href="#">Privacy Policy</a> | <a href="#">Terms of use</a></p>
			</div>
		</div>
		<!--footer结束-->

	</body>
</html>
